<!DOCTYPE html>
<html>
<head><style>body{margin:0;overflow:hidden;background:#000}canvas{display:block}</style></head>
<body><canvas id="c"></canvas>
<script>
const c=document.getElementById('c'),ctx=c.getContext('2d');
c.width=innerWidth;c.height=innerHeight;const p=[];
c.addEventListener('click',e=>{
  for(let i=0;i<100;i++)p.push({
    x:e.clientX,y:e.clientY,
    vx:(Math.random()-0.5)*8,vy:(Math.random()-0.5)*8,
    alpha:1,decay:Math.random()*0.03+0.01,hue:Math.random()*360
  });
});
function a(){
  ctx.fillStyle='rgba(0,0,0,0.1)';
  ctx.fillRect(0,0,c.width,c.height);
  for(let i=p.length-1;i>=0;i--){
    const t=p[i];
    t.x+=t.vx;t.y+=t.vy;t.vy+=0.1;t.alpha-=t.decay;
    if(t.alpha<=0)p.splice(i,1);
    else{
      ctx.save();
      ctx.globalAlpha=t.alpha;
      ctx.beginPath();
      ctx.arc(t.x,t.y,2,0,Math.PI*2);
      ctx.fillStyle=`hsl(${t.hue},100%,50%)`;
      ctx.fill();
      ctx.restore();
    }
  }
  requestAnimationFrame(a);
}
a();
</script></body></html>